<template>
  <div class="theme-content-item" style="position: relative;">
    <div class="padding-20px">
      <div class="left-title">{{ title }}</div>
      <el-form ref="videoFormRef" label-width="120px" :model="form" :rules="rules"
        style="margin-top: 40px">
        <el-row style="display: flex;justify-content:start">
          <el-col :span="10">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="年份" prop="examYear">
              <el-date-picker
                  v-model="form.examYear"
                  value-format="YYYY"
                  type="year"
                  placeholder="请选择年份"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="课程类型" prop="categoryId">
              <el-cascader v-model="form.categoryId" placeholder="请选择课程类型" :options="data.categoryList"
                           :props="{label:'name',value:'id',children:'children',emitPath:false}"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="类目" prop="kindId">
              <el-select clearable v-model="form.kindId" placeholder="请选择类目">
                <el-option v-for="item in data.kindList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="老师" prop="teacherId">
              <el-select multiple clearable v-model="form.teacherIdList" placeholder="请选择老师">
                <el-option v-for="item in data.teacherList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="是否线下" prop="isOffline">
              <el-checkbox v-model="form.isOffline"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="说明" prop="descr">
              <el-input type="textarea" v-model="form.descr" placeholder="请输入说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div style=" position: fixed; bottom: 5%; left: 45%" class="flex-jc-s-b">
        <el-button size="small" @click="goBack()">
          <svg-icon icon-class="back" class="el-input__icon input-icon" />
          <span style="margin-left: 5px;">关 闭</span>
        </el-button>
        <el-button size="small" style="margin-left: 20px;" type="primary" @click="save">
          <svg-icon icon-class="save" class="el-input__icon input-icon" />
          <span style="margin-left: 5px;">保 存</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {listDictItemByCode} from '@/api/config/dic'
import {listTeacher} from '@/api/teacher'
import {addCourse, editCourse} from "@/api/course";
import {ElMessage} from "element-plus";
import {getCourseDetail} from "@/api/course";
const { proxy } = getCurrentInstance();
const route = useRoute()
const router = useRouter()
const routeQuery = reactive(route.query)
const loading = ref(false)
const title = ref('');
const isAdd = ref(true);
const data = reactive({
  categoryList: [],
  kindList: [],
  teacherList: [],
})
const form = reactive({
  id: null,
  name: '',
  examYear: '',
  categoryId: '',
  kindId: '',
  teacherIdList: [],
  isOffline: false,
  publishedFlag: ''
})

const rules = ({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  examYear: [{ required: true, message: '请选择年份', trigger: 'blur' }],
  categoryId: [{ required: true, message: '请选择课程类型', trigger: 'blur' }],
  kindId: [{ required: true, message: '请选择类类目', trigger: 'blur' }],
  teacherIdList: [{ required: true, message: '请选择老师', trigger: 'blur' }]
})

// 详情
const initDetail = () => {
  getCourseDetail(route.query.id).then((res) => {
    let resData = res.data
    Object.keys(form).forEach((key) => { form[`${key}`] = resData[`${key}`] })

    form.isOffline = resData.offlineFlag == 1 ? true : false
    form.examYear = resData.examYear + ""
  })
}
const initData = () => {
  listDictItemByCode({typeCode: 'courseTypeCode'}).then(res => {
    data.categoryList = res.rows
  })
  listDictItemByCode({typeCode: 'courseKindCode'}).then(res => {
    data.kindList = res.rows
  })
  listTeacher({}).then(res => {
    data.teacherList = res.rows
  })
}

const save = () => {
  proxy.$refs["videoFormRef"].validate(valid => {
    if (valid) {
      let requestData = {}
      Object.keys(form).forEach((key) => { requestData[`${key}`] = form[`${key}`] })
      requestData.offlineFlag = form.isOffline ? 1 : 0
      if (isAdd.value) {
        requestData.publishedFlag = 0
        addCourse(requestData).then((res) => {
          reset()
          ElMessage.success('操作成功');
        })
      }else{
        editCourse(requestData).then((res)=>{
          ElMessage.success('操作成功');
        })
      }
    }
  })
}

const reset = () => {
  form.teacherIdList = []
  form.categoryId = ''
}

function goBack() {
  proxy.$tab.closeOpenPage();
  router.go(-1)
}

onMounted(() => {
  let titleMap = {
    add: '新增',
    edit: '修改',
  }
  let type = routeQuery.type
  let titleValue = '新增'
  if (type) {
    titleValue = titleMap[routeQuery.type]
  }
  title.value = titleValue
  isAdd.value = routeQuery.type != 'edit'
  if (!isAdd.value) {
    initDetail()
  }

  initData()
})
</script>
<style scoped lang="scss">
:deep(.el-input) {
  width: 400px;
}
:deep(.el-input__wrapper) {
  width: 400px;
}
</style>
